<template>
  <zero-container v-loading="dataListLoading">
    <!-- 右边信息-start -->
    <div slot="tool">
      <el-collapse-transition>
        <div v-show="showSearch">
          <el-form :inline="true"
                   :model="searchForm">
            <el-form-item label="标题">
              <el-input v-model="searchForm.title"
                        clearable
                        size="small" />
            </el-form-item>
            <el-form-item label="操作">
              <el-input v-model="searchForm.operation"
                        clearable
                        size="small" />
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="searchForm.username"
                        clearable
                        size="small" />
            </el-form-item>
            <el-form-item label="请求地址">
              <el-input v-model="searchForm.requestAddress"
                        clearable
                        size="small" />
            </el-form-item>
            <el-form-item label="等级">
              <el-select v-model="searchForm.level"
                         clearable
                         size="small">
                <el-option key="INFO"
                           value="INFO"
                           label="正常" />
                <el-option key="WARN"
                           value="WARN"
                           label="警告" />
                <el-option key="ERROR"
                           value="ERROR"
                           label="异常" />
              </el-select>
            </el-form-item>
            <el-form-item label="内容信息">
              <el-input v-model="searchForm.data"
                        clearable
                        size="small" />
            </el-form-item>
            <el-form-item>
              <el-button type="success"
                         icon="el-icon-search"
                         @click="searchSubmit()"
                         round
                         size="small">搜索</el-button>
              <el-button icon="el-icon-refresh"
                         type="warning"
                         @click="searchResetForm()"
                         round
                         size="small">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>

      <el-button-group style="float: right;">
        <el-button @click="showSearch = !showSearch"
                   title="显示/隐藏搜索"
                   icon="fa fa-search"
                   size="small" />
        <el-dropdown trigger="click"
                     :hide-on-click="false">
          <el-button title="列"
                     icon="fa fa-th"
                     class="zero-column-dropdown"
                     size="small" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item key="all"
                              label="all">
              <el-checkbox key="all"
                           v-model="cloumn_all_checked"
                           v-on:click.stop.native
                           label="all"
                           @change="cloumnAllChecked">全选</el-checkbox>
            </el-dropdown-item>
            <hr />
            <el-checkbox-group v-model="checkedTableColumns">
              <el-dropdown-item v-for="(column,i) in showColumns"
                                :key="i"
                                :label="i">
                <el-checkbox :key="i"
                             :label="i">{{ column.label }}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-button-group>
    </div>
    <div slot="main"
         style="height: 100%">
      <el-table ref="tableRef"
                height="100%"
                :data="dataList"
                :row-class-name="tableRowClassName"
                border
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                class="zero-table"
                style="width: 100%">
        <el-table-column v-if="showColumns.title.show"
                         prop="title"
                         label="标题"
                         align="center" />
        <el-table-column v-if="showColumns.operation.show"
                         prop="operation"
                         label="操作内容"
                         align="center" />
        <el-table-column v-if="showColumns.username.show"
                         prop="username"
                         label="用户名称"
                         align="center" />
        <el-table-column v-if="showColumns.level.show"
                         prop="level"
                         label="等级"
                         align="center" />
        <el-table-column v-if="showColumns.requestAddress.show"
                         prop="requestAddress"
                         label="请求地址"
                         align="center" />
        <el-table-column v-if="showColumns.method.show"
                         prop="method"
                         label="请求方法"
                         align="center" />
        <el-table-column v-if="showColumns.createTime.show"
                         prop="createTime"
                         label="创建时间"
                         align="center"
                         width="180"
                         :formatter="dateFormat" />
        <el-table-column label="操作"
                         align="center"
                         width="150">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="viewDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 详情框 -->
      <Drawer ref="drawerRef" />
    </div>
    <!-- 右边信息-end -->
    <!-- 页脚-start -->
    <div slot="footer">
      <vxe-pager border
                 align="left"
                 :current-page="page"
                 :page-size="limit"
                 :total="total"
                 :layouts="layouts"
                 @page-change="handlePageChange" />
    </div>
    <!-- 页脚-end -->
  </zero-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module' // 分页相关js
import Drawer from './components/Drawer' // 分页模块
export default {
  name: 'SysLog',
  mixins: [mixinViewModule],
  components: {
    Drawer
  },
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListUrl: '/sysLog/pageList'
      },
      formConfig: {
        titleWidth: 100,
        titleAlign: 'right',
        items: [
          {
            field: 'title',
            title: '标题',
            span: 6,
            folding: true,
            itemRender: { name: '$input', props: { placeholder: '请输入标题' } }
          },
          {
            span: 24,
            align: 'center',
            collapseNode: true
          }
        ]
      },
      showColumns: {
        title: { label: '标题', show: true },
        operation: { label: '操作内容', show: true },
        username: { label: '用户名称', show: true },
        level: { label: '等级', show: true },
        requestAddress: { label: '请求地址', show: true },
        method: { label: '请求方法', show: true },
        createTime: { label: '创建时间', show: true }
      }
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (row.level === 'WARN') {
        return 'warning-row'
      } else if (row.level === 'ERROR') {
        return 'error-row'
      }
      return ''
    },
    viewDetails (row) {
      this.$refs.drawerRef.initDrawer(row)
    }
  }
}
</script>
<style >
.vxe-body--row.error-row {
  background: oldlace;
}

.vxe-body--row.warning-row {
  background: #f0f9eb;
}
</style>
